iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
0

首先先複習一下所有 pages 的結構,
Day12 Pages: 簡單介紹所有頁面大概有的功能 有介紹本專案的全部頁面。

今天來寫 admin 相關的所有頁面:

管理者相關頁面(使用 layout/admin):

024-001

  • admin:
    • index: 列出所有文章(暫時不做 pagination)
    • signIn: 登入頁(Day22已經完成了)
    • addPost: 新增文章
    • postId: 編輯文章

今天會將 admin 剩下未完成的頁面完成,

signIn: 登入頁

雖然之前的篇幅已經寫好了,這邊再貼一次畫面回憶一下。

024-011

index: 列出所有文章

v-content, v-container, v-layout, v-flex
之前都已經介紹過了,是 vuetify 提供的 grid system,
因此這邊可以輕鬆的將頁面切好,不需要寫任何一行 css。

024-002

javascript 的部分:

利用 asyncData,透過昨天寫好的 action(post/getPostsAdmin) 取得所有文章的內容,
並傳入元件 ThePostPreview 中顯示

024-003

頁面截圖:

024-008

addPost: 新增文章

新增文章的部分透過 Day20 元件開發: TheFormAddPost (使用 simple-vue-validator) 完成切版。

024-004

javascript 的部分:

透過 action(post/addPost) 新增文章。

024-005

頁面截圖:

024-009

postId: 編輯文章

template 基本上跟 新增文章一樣差別只在 title 和 執行的 method 不同。

024-006

javascript 的部分:

透過 action(post/getPostByPostId) 取得文章內容,
並透過 action(post/setPost) 更改文章。

024-007

頁面截圖:

024-010

程式碼放在以下 branch:

024-finish-all-pages

指令:

git clone -b 024-finish-all-pages --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run dev

上一篇
#23 Vuex module: tags, post
下一篇
#25 撰寫所有 default 相關頁面切版與串接資料
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言